<template>
  <el-container>
    <el-header>
      <img
        src="~@/assets/banner.png"
        alt=""
        style="height: 35px; width: 88px"
      />
      <div class="right">
        <el-avatar size="medium" :src="userInfo.image"></el-avatar>
        <span style="padding:0 10px 0">欢迎回来，{{userInfo.userName}}</span>
        <span class="el-dropdown-link" @click="logout">
          退出<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
      </div>
    </el-header>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="167px">
        <!-- 创建菜单 -->
        <el-menu class="layoutPageMenu" router>
          <el-menu-item index="/home" route="/home">
            <i class="iconfont icon-home"></i>
            <span slot="title">帝可得</span>
          </el-menu-item>
          <el-submenu index="/task">
            <template slot="title">
              <i class="iconfont icon-task"></i>
              <span>工单管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/task/business" route="/task/business"
                >运营工单</el-menu-item
              >
              <el-menu-item index="/task/operation" route="/task/operation"
                >运维工单</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="/node">
            <template slot="title">
              <i class="iconfont icon-gps"></i>
              <span>点位管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/node/region" route="/node/region"
                >区域管理</el-menu-item
              >
              <el-menu-item index="/node/node" route="/node/node"
                >点位管理</el-menu-item
              >
              <el-menu-item index="/node/partner" route="/node/partner"
                >合作商管理</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="/vm">
            <template slot="title">
              <i class="iconfont icon-vm"></i>
              <span>设备管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/vm/index" route="/vm/index"
                >设备管理</el-menu-item
              >
              <el-menu-item index="/vm/status" route="/vm/status"
                >设备状态</el-menu-item
              >
              <el-menu-item index="/vm/type" route="/vm/type"
                >设备类型管理</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="/user">
            <template slot="title">
              <i class="iconfont icon-user"></i>
              <span>人员管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/user/index" route="/user/index"
                >人员列表</el-menu-item
              >
              <el-menu-item
                index="/user/user-task-stats"
                route="/user/user-task-stats"
                >人效统计</el-menu-item
              >
              <el-menu-item index="/user/user-work" route="/user/user-work"
                >工作量列表</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="/sku">
            <template slot="title">
              <i class="iconfont icon-sku"></i>
              <span>商品管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/sku/sku-class" route="/sku/sku-class"
                >商品类型</el-menu-item
              >
              <el-menu-item index="/sku/sku" route="/sku/sku"
                >商品管理</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/policy/index" route="/policy/index">
            <i class="iconfont icon-policy"></i>
            <span slot="title">策略管理</span>
          </el-menu-item>
          <el-menu-item index="/order/index" route="/order/index">
            <i class="iconfont icon-order"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { getUserInfo } from '@/api/userService'
export default {
  data () {
    return {
      userInfo: {}
    }
  },
  async created () {
    const res = await getUserInfo(this.$store.state.user.userId)
    console.log(res)
    this.userInfo = res
  },
  methods: {
    logout () {
      // 退出，删除token
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-header {
  background-image: url("~@/assets/homelogo.png");
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.right {
  height: 35px;
  width: 300px;
  display: flex;
  align-items: center;
  color:#fff
}
::-webkit-scrollbar {
  width: 0 !important;
  /*滚动条宽度*/
  height: 7px;
  /*滚动条高度*/
  background-color: rgb(0, 12, 46);
}
i {
  padding-right: 10px;
}
</style>
